<template>
    <div class="screen-left">
        <div class="screen-left-item">
            <div class="item-label">人</div>
            <div class="more-button">...</div>
            <div class="item-content">
                <div class="title">实有人口（人）</div>
                <div class="value">
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                    <span class="digit">3</span>
                    <span class="digit">8</span>
                    <span class="digit">7</span>
                    <span class="digit">7</span>
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                </div>
                <div class="details">
                    <div class="detail-item">
                        <div class="detail-label">户籍人口</div>
                        <div class="detail-value">1569</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">游客人数（人）</div>
                        <div class="detail-value">564</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">重点人群（人）</div>
                        <div class="detail-value">89</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-left-item">
            <div class="item-label">地</div>
            <div class="more-button">...</div>
            <div class="item-content">
                <div class="title">辖区面积（KM²）</div>
                <div class="value">
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                    <span class="digit">1</span>
                    <span class="digit">1</span>
                    <span class="digit">2</span>
                    <span class="digit">8</span>
                </div>
                <div class="details">
                    <div class="detail-item">
                        <div class="detail-label">行政村</div>
                        <div class="detail-value">1569</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">自然村</div>
                        <div class="detail-value">564</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">房屋（栋）</div>
                        <div class="detail-value">89</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-left-item">
            <div class="item-label">物</div>
            <div class="more-button">...</div>
            <div class="item-content">
                <div class="title">终端总数</div>
                <div class="value">
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                    <span class="digit">3</span>
                    <span class="digit">6</span>
                    <span class="digit">4</span>
                    <span class="digit">8</span>
                    <span class="digit">4</span>
                    <span class="digit">5</span>
                </div>
                <div class="details">
                    <div class="detail-item">
                        <div class="detail-label">视频监控（个）</div>
                        <div class="detail-value">1569</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">传感器（个）</div>
                        <div class="detail-value">564</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">重点人群（人）</div>
                        <div class="detail-value">89</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-left-item">
            <div class="item-label">事</div>
            <div class="more-button">...</div>
            <div class="item-content">
                <div class="title">工单执行率</div>
                <div class="execution-rate-content">
                    <div class="chart-container" ref="executionRateChart"></div>
                    <div class="issue-list">
                        <div class="issue-item">
                            <span>物业与住房</span>
                            <span class="issue-value">26</span>
                        </div>
                        <div class="issue-item">
                            <span>消费与商品服务</span>
                            <span class="issue-value">18</span>
                        </div>
                        <div class="issue-item">
                            <span>农村与三农问题</span>
                            <span class="issue-value">9</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-left-item">
            <div class="item-label">情</div>
            <div class="more-button">...</div>
            <div class="item-content">
                <div class="title">综合满意度</div>
                <div class="execution-rate-content">
                    <div class="chart-container" ref="satisfactionChart"></div>
                    <div class="issue-list">
                        <div class="issue-item">
                            <span>微信群（个）</span>
                            <span class="issue-value">26</span>
                        </div>
                        <div class="issue-item">
                            <span>热点话题（个）</span>
                            <span class="issue-value">18</span>
                        </div>
                        <div class="issue-item">
                            <span>消息回复及时率</span>
                            <span class="issue-value">9%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

const executionRateChart = ref(null);
const satisfactionChart = ref(null);

let satisfactionChartInstance;
let executionRateChartInstance;

onMounted(() => {
    initCharts();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    satisfactionChartInstance?.resize();
    executionRateChartInstance?.resize();
};

const initCharts = () => {
    initExecutionRateChart();
    initSatisfactionChart();
};

const initSatisfactionChart = () => {
    if (satisfactionChart.value) {
        satisfactionChartInstance = echarts.init(satisfactionChart.value);
        const option = {
            series: [
                {
                    type: 'pie',
                    radius: ['70%', '85%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        formatter: '{d}%',
                        fontSize: 16,
                        fontWeight: 'bold',
                        color: '#fff'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 65, name: '执行率', itemStyle: { color: '#58D6F0' } },
                        { value: 35, name: '未执行', itemStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
                    ]
                }
            ]
        };
        satisfactionChartInstance.setOption(option);
    }
}
const initExecutionRateChart = () => {
    if (executionRateChart.value) {
        executionRateChartInstance = echarts.init(executionRateChart.value);
        const option = {
            series: [
                {
                    type: 'pie',
                    radius: ['70%', '85%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        formatter: '{d}%',
                        fontSize: 16,
                        fontWeight: 'bold',
                        color: '#fff'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 75, name: '执行率', itemStyle: { color: '#19e476' } },
                        { value: 25, name: '未执行', itemStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
                    ]
                }
            ]
        };
        executionRateChartInstance.setOption(option);
    }
}

</script>
<style scoped lang="scss">
/* 左侧可视化组件样式 */
.screen-left {
    position: absolute;
    left: 1.04vw; // 20px
    top: 9.26vh; // 100px
    width: 18.67vw; // 360px
    height: calc(100vh - 12.96vh); // 140px
    z-index: 100;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .screen-left-item {
        width: 100%;
        height: 18.5%;
        background: rgba(0, 20, 40, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 174, 255, 0.3);
        border-radius: 0.42vw; // 8px
        box-shadow: 0 0.21vw 0.625vw rgba(0, 0, 0, 0.3); // 0 4px 12px
        position: relative;

        .item-label {
            position: absolute;
            top: 0;
            left: 0;
            width: 1.56vw; // 30px
            height: 2.78vh; // 30px
            background: linear-gradient(135deg, #6fb3ee 0%, #0378ff 100%);
            border: 1px solid rgba(0, 174, 255, 0.5);
            border-radius: 0.21vw; // 4px
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: calc(12px + 0.2vw);
            font-weight: bold;
            text-shadow: 0 0 0.26vw rgba(0, 174, 255, 0.5); // 5px
        }

        .item-content {
            position: absolute;
            top: 0.93vh; // 10px
            left: 2.08vw; // 40px
            right: 0.52vw; // 10px
            bottom: 0.93vh; // 10px
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #fff;
        }

        .title {
            font-size: calc(14px + 0.21vw);
            font-weight: bold;
            color: #a2d2ff;
        }

        .value {
            font-size: calc(16px + 0.21vw);
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 0.52vw rgba(0, 174, 255, 0.5); // 10px
            display: flex;
            margin-bottom: 0.1vh; // 2px
        }

        .digit {
            display: inline-block;
            padding: 0.1vh 0.26vw; // 2px 5px
            margin: 0 0.1vw; // 0 2px
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 0.21vw; // 4px
            box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1); // 0 2px 5px
            color: #fff;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
        }

        .details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100%;
            align-items: center;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .detail-item:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 15%;
            bottom: 15%;
            width: 0.05vw; // 1px
            background: rgba(0, 174, 255, 0.3);
        }

        .detail-label {
            font-size: calc(10px + 0.1vw);
            color: #a2d2ff;
        }

        .detail-value {
            font-size: calc(14px + 0.21vw);
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
        }

        .execution-rate-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            min-height: 0;
        }

        .chart-container {
            width: 50%;
            height: 100%;
        }

        .issue-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 50%;
        }

        .issue-item {
            font-size: calc(12px + 0.1vw);
            color: #a2d2ff;
            margin-bottom: 0.46vh; // 5px
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 174, 255, 0.2);
            padding-bottom: 0.46vh; // 5px
        }

        .issue-value {
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
        }

        .more-button {
            position: absolute;
            top: -0.46vh; // -5px
            right: 0.52vw; // 10px
            color: #fff;
            cursor: pointer;
            font-size: 1.04vw; // 20px
            font-weight: bold;
        }
    }
}
</style>